<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view style="z-index: -10;">
			<image src="http://n298651t63.zicp.vip:9001/image/file/20221017/a578b44580e04cf1ad7d27731fc01dbe_new.png"
				style="width: 100%;height: 40vh;"></image>
			<view class="heardImage"></view>
			<view class="heardTxt flex align-center margin-lr-sm justify-between">
				<view class="flex align-center" >
					<u-icon name="map" color="#fff" size="18"></u-icon>
					<span class="margin-left-xs text-white text-df">咸宁市</span>
				</view>
				<view class="heardTxt_right">
					<u-icon name="search" color="#fff" size="20"></u-icon>
					<u-input v-model="searchWord" border="none" style="border: 0px;font-size: 28rpx;" color="#fff"
						fontSize="14" placeholder="搜索附近的棋牌室" placeholderStyle="color:#fff;font-size:24rpx"></u-input>
					<button class="btnSearch" @click="getStoreList">搜索</button>
				</view>
			</view>
		</view>
		<!-- 展示地区店铺列表 -->
		<view class="centerBox">
			
			<view v-for="(item,index) in storeList" :key="index" class="storeBox  bg-white radius"
				@click="goStoreDetalis(item)">
				
				<view style="display: flex;align-items: center;justify-content: space-between;"
					class="margin-bottom-sm">
					<view>
						<view class="text-black text-bold  text-xl">{{item.mchName}}</view>
						<view class="margin-top-xs text-gray text-sm">门店地址:{{item.mchAddr}}</view>
						<view class="margin-top-xs text-gray text-sm">距离:{{(item.distince/1000).toFixed(2)}}km</view>
					</view>
					<u-icon @click.native.stop="callPhone(item)" name="phone" size="24" color="#4E9B52"></u-icon>
				</view>
				<view style="display: flex;column-gap: 1px;align-items: center; justify-content: space-between;">
					<image v-for="(image,i) in item.scrollPicUrls.split(',')" :key="i" mode="scaleToFill" :src="image"
						style="height: 160rpx;width: 160rpx;border-radius: 10rpx;"></image>
				</view>
				<view class="flex align-center justify-start margin-top-sm">
					<u-tag text="免费WIFI" plain shape="circle" size="mini" bg-color="#fff" border-color="#eee"
						color="#999"></u-tag>
					<u-tag text="停车位" plain shape="circle" size="mini" class="margin-left-xs" bg-color="#fff"
						border-color="#eee" color="#999"></u-tag>
				</view>
				<view class="margin-top-lg flex align-center justify-between">
					<u-tag text="4小时起订" shape="circle" color="#fff" bg-color="#4E9B52" border-color="#4E9B52">
					</u-tag>
					<text class="text-gray">查看详情</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		name: 'Home',
		data() {
			return {
				storeList: [],
				searchWord: '', //搜索内容
				showOpenDoorModal: false,
				contentOpenDoor: '',
				Location:{
					'latitude':0,
					'longitude':0
				},
			}
		},
		computed: {

		},
		created() {
			this.getLocationT();
			
		},

		methods: {
			
			callPhone(item) {
				//#ifdef MP-WEIXIN
				uni.makePhoneCall({
					phoneNumber: item.phone
				});
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(item.phone, true);
				//#endif
			},
			getLocationT() {
				let that = this;
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				uni.getSetting({
					success(res) {
						console.log(res)

						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											uni.setStorageSync('Location',res);
											console.log(uni.getStorageSync('Location'));
											that.getStoreList();
										},
										fail(error) {
											console.log('失败', error)
										}
									})
								},
								fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)

									uni.showModal({
										title: '提示',
										content: '若点击不授权，将无法使用位置功能',
										cancelText: '不授权',
										cancelColor: '#999',
										confirmText: '授权',
										confirmColor: '#f94218',
										success(res) {
											console.log(res)
											if (res.confirm) {
												// 选择弹框内授权
												uni.openSetting({
													success(res) {
														console.log(res.authSetting)
													}
												});
												that.getStoreList();
											} else if (res.cancel) {
												// 选择弹框内 不授权
												that.getStoreList();
												console.log('用户点击不授权')
											}
										}
									})
								}
							})
						} else {
							// 有权限则直接获取
							
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									uni.setStorageSync('Location',res);
									console.log(uni.getStorageSync('Location'));
									that.getStoreList();

								},
								fail(error) {
									uni.showToast({
										title: '请勿频繁调用！',
										icon: 'none',
									})
									console.log('失败', error);
									that.getStoreList();
								}
							})
						}
					}
				})

			},

			getStoreList() {
				
				this.Location = uni.getStorageSync('Location');
				this.storeList = [];
				uni.$u.http.post('/rest/api/mch/list', {
					searchWord: this.searchWord,
					lat: this.Location.latitude,
					
					lon: this.Location.longitude
				}).then(res => {
					if (res.resultCode!=0){
						uni.$u.http.post('/rest/api/mch/all', {

						}).then(res=>{
							this.storeList = res.data;
							return
						});
					}else{
					if (res.data.length <= 0) {
						uni.showToast({
							title: '未搜索到相关门店',
							icon: 'none'
						})
					}
					this.storeList = res.data;
				}
				
				})
			},

			goPage(page) {
				let url = '';
				uni.$u.route({
					type: 'to',
					url: url
				});
			},
			goStoreDetalis(item) {
				console.log(111111111111111);
				uni.setStorageSync('storeId', item.id);
				uni.setStorageSync('storeFlag', true);
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
			changeCity() {
				uni.navigateTo({
					url: '/pagesA/store/citylist'
				})
			},
		}
	}
</script>

<style scoped>
	

	.heardTxt {
		position: fixed;
		top: 0px;
		padding: 20rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		margin-top: 11vh;
	}

	.heardTxt_right {
		background: rgba(0, 0, 0, .3);
		border-radius: 20px;
		z-index: 2;

		width: 75%;
		height: 60rpx;
		/* 	right: 10px; */
		display: flex;
		align-items: center;
		padding: 20rpx;
		/* margin-top: 11vh; */
	}

	.heardImage {
		background: #4E9B52;
		width: 100%;
		height: 40vh;
		position: fixed;
		top: 0px;
	}


	.btnSearch {
		height: 50rpx;
		width: 160rpx;
		border-radius: 40rpx;
		color: #4E9B52;
		font-weight: 500;
		font-size: 28rpx;
		text-align: center;
		line-height: 50rpx;
		border: 0px !important;
	}

	.centerBox {
		position: fixed;
		top: 17vh;
		width: 100%;
		padding: 20rpx;
		height: 80vh;
		overflow: auto;
		
	}

	.storeBox {
		margin: 20rpx 10rpx;
		height: auto;
		padding: 20rpx;
		color: aqua;
	}

	.boxImage {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 20rpx;
		margin-top: 20rpx;
	}
</style>
